<template>
    <div class="tabs-cps-view">
        <div class="title">
            <div class="btn-wrapper">
                <button><i class="el-icon-caret-top"></i></button>
                <button><i class="el-icon-caret-bottom"></i></button>
                <button>
                    {{ $t("message.bhView.topBtnDownList.addition") }}
                </button>
                <button>
                    {{ $t("message.bhView.topBtnDownList.delete") }}
                </button>
            </div>
        </div>
        <div v-for="(item, index) in prposTabelData" :key="index">
            <div class="row" v-if="item.fileName || item.photoNote">
                <div class="img-item">
                    <el-image class="img" :src="item.fileName" fit="cover" />
                </div>
                <div class="text-item-view">
                    <p class="_title">メモ</p>
                    <el-input type="textarea" :rows="4" placeholder=" " v-model="item.photoNote"
                        class="textarea"></el-input>
                    <div class="check-lay">
                        <!-- <el-checkbox v-model="item.notPrint">印刷対象外</el-checkbox> -->
                        <el-image style="
                                width: 18px;
                                height: 18px;
                                padding: 2px;
                                margin-right: 5px;
                            " :src="item.notPrint == 1 ? checkImg : uncheckImg" fit="fill"></el-image>
                        印刷対象外
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
import { getResOfferPhotoData } from "@/api/api";

export default {
    name: "Tab_4",
    props: {
        offerComboxData: Object,
        tableSelectRow: Object,
    },
    data() {
        return {
            checkImg: require("@/assets/img/checkbox_sel.png"),
            uncheckImg: require("@/assets/img/checkbox_unsel.png"),

            prposTabelData: [],
            tableHeight: 350,
            loading: false,
            checked: false,
            textarea: "",
            dateValue: "2021-12",
        };
    },
    components: {},
    computed: {
        macCodeValue() {
            return this.$store.state.macCode;
        },
    },

    watch: {
        macCodeValue: {
            deep: true,
            handler: function (newV, oldV) {
                this.getResOfferPhotoDataApi();
            },
        },

        tableSelectRow: {
            deep: true,
            immediate: true,
            handler: function (newV, oldV) {
                this.dateValue = this.tableSelectRow.ssn_date;
                this.getResOfferPhotoDataApi();
            },
        },
    },
    methods: {
        getResOfferPhotoDataApi() {
            let temp = {
                dmgCode: this.$store.state.macCode,
                ssnDate: this.dateValue,
            };
            getResOfferPhotoData(temp).then((res) => {
                this.prposTabelData = [];
                if (res.data.code == 0) {
                    this.prposTabelData = res.data.data;
                }
            });
        },
    },
    created() {
        this.getResOfferPhotoDataApi();
    },
    mounted() {
        this.getResOfferPhotoDataApi();
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.tabs-cps-view {
    width: 100%;

    .title {
        width: 100%;
        height: 32px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 12px;

        .btn-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 68px;
            height: 32px;
            border: 1px solid #d9d9d9;
            margin-left: 16px;
            border-radius: 4px;
        }

        button:nth-child(1) {
            width: 32px;
            font-size: 18px;
        }

        button:nth-child(2) {
            width: 32px;
            font-size: 18px;
        }
    }

    .row {
        display: flex;
        justify-content: space-between;
        padding-bottom: 12px;
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 12px;

        .img-item {
            width: 290px;
            height: 162px;
            text-align: center;
            border: 1px solid #d9d9d9;

            .img {
                width: 290px;
                height: 162px;
            }
        }

        .check-lay {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }
}

.text-item-view {
    width: calc(100% - 306px);

    ._title {
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 12px;
    }
}

.textarea {
    margin-bottom: 12px;

    ::v-deep .el-textarea__inner {
        resize: none;
        background: #ffffe1;
    }
}
</style>
